<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="'top' + index" class="scroll-item" v-for="(item, index) in topBar" :key="index" @tap="changeTab(index)">
				<text :class="topBarIndex === index ? 'f-active-color' : 'f-color'">{{ item.name }}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:' + clentHeight + 'px;'">
			<swiper-item v-for="(item, index) in topBar" :key="index">
				<view class="home-data">
					<Banner></Banner>
					<Icons></Icons>
					<Card cardTitle="热销爆品"></Card>
					<Hot></Hot>
					<Card cardTitle="推荐店铺"></Card>
					<Shop></Shop>
					<Card cardTitle="为您推荐"></Card>
					<CommodityList></CommodityList>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import IndexSwiper from '@/components/index/IndexSwiper.vue';
import Recommend from '@/components/index/Recommend.vue';
import Card from '@/components/common/Card.vue';
import CommodityList from '@/components/common/CommodityList.vue';
import Banner from '@/components/index/Banner.vue';
import Icons from '@/components/index/Icons.vue';
import Hot from '@/components/index/Hot.vue';
import Shop from '@/components/index/Shop.vue';
export default {
	data() {
		return {
			//选中的索引
			topBarIndex: 0,
			//顶栏跟随的索引id值
			scrollIntoIndex: 'top0',
			//内容块的高度值
			clentHeight: 0,
			//顶栏数据
			topBar: [
				{ name: '推荐' },
				{ name: '运动户外' },
				{ name: '服饰内衣' },
				{ name: '鞋靴箱包' },
				{ name: '美妆个护' },
				{ name: '家居数码' },
				{ name: '食品母婴' }
			]
		};
	},
	components: {
		IndexSwiper,
		Recommend,
		Card,
		CommodityList,
		Banner,
		Icons,
		Hot,
		Shop
	},
	onLoad() {
		this.getCode();
	},
	onReady() {
		// 获取组件home-data元素的高度值的总和
		let view = uni.createSelectorQuery().select('.home-data');
		// 查询节点的布局位置
		view.boundingClientRect((data) => {
			this.clentHeight = data.height;
		}).exec();
	},
	methods: {
		async getCode() {
			try {
				const res = await this.$http({
					url: '/captcha',
					method: 'GET'
				});
				console.log(res);
			} catch (e) {
				console.log(e);
			}
		},

		changeTab(index) {
			if (this.topBarIndex === index) {
				return;
			}
			this.topBarIndex = index;
			this.scrollIntoIndex = 'top' + index;
		},
		onChangeTab(e) {
			this.changeTab(e.detail.current);
		}
	}
};
</script>

<style lang="scss" scoped>
.scroll-content {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item {
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 32rpx;
}
.f-active-color {
	padding: 10rpx 0;
	border-bottom: 6rpx solid #49bdfb;
}
</style>
